<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<button id="sdf" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">模态框</button>-->
<div class="modal fade" id="updateMenuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top: 50px">
        <div class="modal-content">
            <div class="modal-header" >
                <h4 class="modal-title" id="myModalLabel" style="margin-left: 150px">
                    新建菜单项目
                </h4>
            </div>
            <div class="modal-body" id="myModalBody">
                <div class="col-md-12 grid-margin stretch-card" >
                    <div >
                        <div style="margin-left: 20px">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-primary text-white">项目名</span>
                                    </div>
                                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="file" id="updateMenuImg1" class="file-upload-default" onchange="showFileName(1)">
                                <div class="input-group col-xs-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-primary text-white">白图</span>
                                    </div>
                                    <input id="formControl1" type="text" class="form-control file-upload-info" disabled placeholder="图片名称（空）">
                                    <span class="input-group-append">
                                        <button class="file-upload-browse input-group-text" style="color:#595959" onclick="uploadFile(1)">选择</button>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="file" id="updateMenuImg2" class="file-upload-default" onchange="showFileName(2)">
                                <div class="input-group col-xs-12">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-primary text-white">黑图</span>
                                    </div>
                                    <input type="text" id="formControl2" class="form-control file-upload-info" disabled placeholder="图片名称（空）">
                                    <span class="input-group-append">
                                        <button class="file-upload-browse input-group-text" style="color:#595959"  onclick="uploadFile(2)">选择</button>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-primary text-white">URL</span>
                                    </div>
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">/</span>
                                    </div>
                                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                                    <div class="input-group-append">
                                        <span class="input-group-text">/</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-check form-check-warning">
                                    <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input" checked>
                                        客户权限
                                    </label>
                                </div>
                                <div class="form-check form-check-warning">
                                    <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input" checked>
                                        系统管理员
                                    </label>
                                </div>
                                <div class="form-check form-check-warning">
                                    <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input" checked>
                                        技术管理员
                                    </label>
                                </div>
                                <div class="form-check form-check-warning">
                                    <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input" checked>
                                        销售管理员
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="closeButton" type="button" class="btn btn-default" data-dismiss="modal" onclick="returnModal()">关闭
                </button>
                <button id="defineButton" onclick="el()" type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div  class="content-wrapper" >
    <div class='row' style='margin-bottom: -50px'>
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body" style="padding: 50px">
                    <div class="updateMenu-title-left">
                        <h4 class="card-title" style="width: 300px;font-size: 25px">管理菜单栏</h4>
                        <p class="card-description" style="width: 300px;margin-bottom: 0px">
                            系统管理员更改菜单栏模块
                        </p>
                    </div>
                    <div class="updateMenu-title-right">
                        <select class="magic btn btn-dark" id="findMenu" onchange="findMenuByStatus()">
                            <option value="*">全部</option>
                            <option value="customer">客户权限</option>
                            <option value="systemAdmin">系统管理员</option>
                            <option value="technicalAdmin">技术管理员</option>
                            <option value="salesAdmin">销售管理员</option>
                        </select>
                        <button class="btn btn-warning" data-toggle="modal" data-target="#updateMenuModal">新键</button>
                        <button class="btn btn-success">确认提交</button>
                    </div>
                    <img class="dividing-line" th:src="@{/images/fengexian.png}">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th style="padding-left: 80px">ID</th>
                                <th >项目名</th>
                                <th >图标</th>
                                <th style="width: 400px;text-align: center">操作</th>
                            </tr>
                            </thead>
                            <tbody id="updateMenu_tbody">
                            <tr th:each="menu,iterStat:${menus}">
                                <td style="padding: 0px 0px 0px 80px">
                                    <span th:text="${menu.id}" ></span>
                                </td>
                                <td style="padding: 0px 0px 0px 20px">
                                    <span th:text="${menu.name}"></span>
                                </td>
                                <td style="padding: 0px 0px 0px 20px">
                                    <img style="border-radius: 0px" th:src="${menu.blackImage}">
                                </td>
                                <td style="text-align: center;padding-top: 15px;padding-bottom: 15px">
                                    <button class="update-menu-delete btn btn-danger btn-rounded" >删除</button>
                                    <button class="update-menu-update btn btn-info btn-rounded" >更新</button>
                                </td>
                            </tr>
                            <tr><td></td><td></td><td></td><td></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var menuList = [[${menus}]];
    updateMenuInfomation(menuList);
</script>
</body>
</html>